<template>
  <view :class="['dropdown-item', isTopic ? 'topic-class' : '']">
    <template v-if="isTopic">
      <view class="topic flex-between pb-md pt-md">
        <view class="mr-lg topic-item pd-sm f-caption radius flex-y-center"
              v-for="(item,index) in currentLabel" :key="index" @tap="topicChange(item)">
          <view class="mr-sm topic-icon">
            #
          </view>
          <view>
            {{ item.topicName }}
          </view>
          <view class="topic-icon pl-sm">
            <img src="../static/img/dynamic/hot.png" alt="">
          </view>
        </view>
        <view class="arrowBg">
          <view class="arrow" :class="{ up: isActive }" @click="onTitleClick">
            <i class="iconfont icon-right text-bold" style="font-size: 22rpx"></i>
          </view>
        </view>
      </view>
    </template>
    <template v-else>
      <view
          class="dropdown-item__title flex-center"
          :class="{ active: !isCustom  ? isActive :  value }"
          @click="onTitleClick"
      >
        <template>
          {{ currentLabel }}
        </template>
        <view class="arrow" :class="{ up: isActive }">
          <i class="iconfont icon-right text-bold" style="font-size: 22rpx"></i>
        </view>
      </view>
    </template>

    <view
        v-show="isActive"
        class="dropdown-item__wrapper"
        :style="{ top: dropdownMenu.overlayTop + 'px', zIndex: contentZ }"
    >
      <slot name="content">
        <!-- 默认内容：options列表 -->
        <view class="dropdown-item__content">
          <view
              v-for="(option, idx) in options"
              :key="option.id + '-' + idx"
              class="dropdown-item__option"
              :class="{ selected: option.id === value }"
              @click="onSelect(option)"
          >
            {{ option.title }}
          </view>
        </view>
      </slot>
    </view>
  </view>
</template>

<script>
export default {
  name: "DropdownItem",
  inject: ["dropdownMenu"],
  props: {
    options: {
      type: Array,
      default: () => []
    },
    value: {
      type: [String, Number, Boolean],
      default: ""
    },
    title: [String, Array],
    isTopic: {
      type: Boolean,
      default: () => false
    },
    isCustom: {
      type: Boolean,
      default: () => false
    },
  },
  data() {
    return {
      contentZ: 999
    };
  },
  computed: {
    index() {
      return this.$parent.$children.indexOf(this);
    },
    isActive() {
      return this.dropdownMenu.activeIndex === this.index;
    },
    currentLabel() {
      console.log('this.value', this.value)
      if (Array.isArray(this.title)) {
        return [...this.title];
      } else {
        const selected = this.options.find(o => o.id === this.value);
        return selected ? selected.title : this.title;
      }
    }
  },
  methods: {
    onTitleClick() {
      this.dropdownMenu.toggleItem(this.index);
      if (this.isCustom) {
        this.$emit("onTitleClick");
      }
    },
    onSelect(option) {
      this.$emit("change", option);
      this.dropdownMenu.close();
    },
    topicChange(item) {
      this.$emit("topicChange", item);
    }
  }
};
</script>

<style scoped lang="scss">
.dropdown-item {
  flex: 1;
  position: relative;
}

.dropdown-item__title {
  padding: 10rpx 0;
  text-align: center;
  font-size: 28rpx;
  background: #fff;
}

.dropdown-item__title.active {
  color: rgb(28, 128, 10);
}

.arrow {
  margin-left: 12rpx;
  transform: rotate(90deg);
  transition: transform .22s;
}

.arrow.up {
  transform: rotate(270deg);
}

.dropdown-item__wrapper {
  position: fixed;
  left: 0;
  right: 0;
}

.dropdown-item__content {
  background-color: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transform-origin: top;
  transition: transform .22s ease, opacity .22s ease;
}

.dropdown-item__option {
  padding: 5px;
  text-align: center;
  border-bottom: 1px solid #ebedf0;
  background: #fff;
}

.dropdown-item__option.selected {
  color: rgb(28, 128, 10);
}

.topic-class {
  max-width: 100%;

  .arrowBg {
    position: absolute;
    right: -20rpx;
    background: #fff;
    width: 60rpx;
    text-align: center;
    line-height: 60rpx;
  }

  .topic {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 100%;

    .topic-item {
      background: #f6f6f6;
      color: #323233;

      .topic-icon {
        font-weight: 600;
        color: #FF920D;
        font-size: 24rpx;

        img {
          height: 26rpx;
          width: 26rpx;
        }
      }
    }
  }
}
</style>
